<!--  -->
<template>
  <div class="progress-detail">
    <div>
      {{progressDetailData.head}}
    </div>
    <el-table
      size="mini"
      style="width: 100%"
      height="100%"
      :data="progressDetailData.list"
    >
      <template v-for="item in headData">
        <el-table-column
          :prop="item.prop"
          :key="item.prop"
          :label="item.label"
          :width="item.width"
          show-overflow-tooltip
        ></el-table-column>
      </template>

    </el-table>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    progressDetailData: {
      type: Object,
      default: {},
    },
  },
  data() {
    //这里存放数据
    return {
      headData: [
        {
          prop: "PID",
          label: "PID",
          width: 60,
        },
        {
          prop: "USER",
          label: "USER",
          width: 50,
        },
        {
          prop: "PR",
          label: "PR",
          width: 40,
        },
        {
          prop: "NI",
          label: "NI",
          width: 40,
        },
        {
          prop: "VIRT",
          label: "VIRT",
          width: 70,
        },
        {
          prop: "RES",
          label: "RES",
          width: 70,
        },
        {
          prop: "SHR",
          label: "SHR",
          width: 60,
        },
        {
          prop: "S",
          label: "S",
          width: 30,
        },
        {
          prop: "CPU",
          label: "%CPU",
          width: 70,
        },
        {
          prop: "MEM",
          label: "%MEM",
          width: 70,
        },
        {
          prop: "TIME",
          label: "TIME",
          width: 75,
        },
        {
          prop: "COMMAND",
          label: "COMMAND",
          width: "auto",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log("headData", this.progressDetailData);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.progress-detail {
  width: 100%;
  height: 100%;
  // height: 290px;
  .head {
    width: 100%;
    &-item {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #4ae2c6;
    }
  }
  .el-table {
    background-color: transparent;
    border: 0;
  }
  ::v-deep .el-table tr {
    background-color: transparent;
  }
  .el-table--border::after,
  .el-table--group::after {
    width: 0;
  }
  .el-table::before {
    height: 0;
  }
  ::v-deep .el-table__header {
    border-bottom: 1px solid #364465;
    margin-bottom: 10px;
  }
  // ::v-deep .el-table__body {
  //   padding-left: 16px;
  // }
  ::v-deep .el-table .cell {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    color: #4ae2c6;
    padding: 0;
    white-space: nowrap;

    // text-align: right;
  }
  ::v-deep .el-table .cell:nth-of-type(1) {
    padding-left: 16px;
  }
  // ::v-deep .el-table__header .cell {
  //   font-size: 14px;
  // }
  ::v-deep .el-table__header .cell {
    text-align: left;
    padding: 5px 0;
  }
  ::v-deep .el-table__body-wrapper {
    height: 300px !important;
  }
  ::v-deep .el-table--mini .el-table__cell {
    padding: 0;
  }
}
</style>